<template>
  <div style="margin-left:15px;margin-top:15px">
    <!-- <el-card> -->
    <div
      style="width: 130px; margin: 0 auto; font-size: 18px; margin-bottom: 20px"
    >
      请选择您的座位
    </div>
    <el-form :model="roomForm" :inline="true">
      <el-form-item label="楼层：">
        <el-select
          v-model="roomForm.floor"
          placeholder="请选择楼层"
          @change="selectRooms"
        >
          <el-option label="一楼" value="1"> </el-option>
          <el-option label="二楼" value="2"> </el-option>
          <el-option label="三楼" value="3"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间:">
        <el-select v-model="roomForm.roomNo" placeholder="请选择房间" @change="selectRoom">
          <el-option
            v-for="item in roomDatas"
            :key="item.id"
            :label="`${item.roomNo}_${item.roomName}`"
            :value="item.roomNo"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="selectSeat">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- </el-card> -->
    <div v-if="roomData.length>0">
      <!-- <div style="width:100px;margin:0 auto">房间信息：</div> -->
      <el-form :model="roomData[0]" inline>
      <el-form-item label="房间名称">
        {{roomData[0].roomName}}
      </el-form-item>
      <el-form-item label="房间号">
        {{roomData[0].roomNo}}
      </el-form-item>
      <el-form-item label="座位总数">
        {{roomData[0].seatTotalNum}}
      </el-form-item>
      <el-form-item label="可预约座位数">
        {{roomData[0].reservedSeatNum}}
      </el-form-item>
      <el-form-item label="预约最低信用值">
        {{roomData[0].creditLevel}}
      </el-form-item>
    </el-form>
    </div>
    <el-card style="width:95%">
      <div class="seat">
        <div v-for="item in seatData" :key="item.id" class="seatItem" style="margin:8px">
          <img
            v-if="item.status === '1'&& userInfo.type==='0'"
            :src="seatSrc"
            style="width: 100%"
            :id="item.id"
            @click="selected(item)"
          />
          <img
            v-if="item.status === '1'&& userInfo.type==='1'"
            :src="seatSrc"
            style="width: 100%"
            :id="item.id"
            @click="getSeatInfo(item)"
          />
          <img
            v-if="item.status === '0'&& userInfo.type==='0'"
            :src="noSeatSrc"
            style="width: 100%"
          />
          <img
            v-if="item.status === '0'&& userInfo.type==='1'"
            :src="noSeatSrc"
            style="width: 100%"
            @click="getSeatInfo(item)"
          />
          <div
            style="
              display: flex;
              align-content: center;
              justify-content: center;
              font-size: 13px;
            "
          >
            {{ item.seatNo }}
          </div>
        </div>
      </div>
    </el-card>

    <el-dialog title="预约座位" :visible.sync="dialogVisible"  width="40%">
      <el-form :model="reserveForm">
        <el-form-item label="座位号：">
          <div style="width: 50%">{{ reserveForm.seatNo }}</div>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-date-picker
            v-model="reserveForm.time"
            :picker-options="pickerOptions"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 80%"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="reserveSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="座位信息" :visible.sync="dialogSeatVisible"  width="40%">
      <el-form :model="seatOnForm" inline label-width="150px">
        <el-form-item label="座位号：">
          <el-input v-model="seatOnForm.seatNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="座位所在阅览室：">
          <el-input v-model="seatOnForm.room.roomName" disabled></el-input>
        </el-form-item>
        <el-form-item v-if="seatOnForm.user" label="预约人">
          <el-input v-model="seatOnForm.user.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="座位状态：">
          <el-select v-if="seatOnForm.status==='1'" v-model="seatOnForm.status">
            <el-option label="不可预约" value="0"></el-option>
            <el-option label="可预约" value="1"></el-option>
          </el-select>
          <el-select v-if="seatOnForm.status==='0'" v-model="seatOnForm.status" disabled>
            <el-option label="不可预约" value="0"></el-option>
            <el-option label="可预约" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right:5px" @click="dialogSeatVisible = false">取 消</el-button>
        <el-button style="margin-right:5px" type="primary" @click="editSeat">保 存</el-button>
        <el-popconfirm
          confirmButtonText="确定"
          cancelButtonText="取消"
          icon="el-icon-delete"
          iconColor="red"
          @onConfirm="deleteSeat()"
          title="确定要删除吗？"
        >
          <el-button style="margin-right:5px" slot="reference"  icon="el-icon-delete"
            >删除该座位</el-button
          >
          </el-popconfirm>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import webservice from "@/utils/webservice";
export default {
  data() {
    return {
      roomForm: {
        roomNo: "",
      },
      roomData: [],
      roomDatas:[],
      seatForm: {},
      seatData: [],
      seatSrc: require("../../../src/assets/seat.png"),
      noSeatSrc: require("../../../src/assets/noSeat.png"),
      flag: false,
      dialogVisible: false,
      reserveForm: {
        time: [],
      },
      userInfo: {},
      pickerOptions:{//时间限制
          disabledDate (time) {
            //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
            return time.getTime() < Date.now()//选当前时间之后的时间
          }
      },
      dialogSeatVisible:false,
      seatOnForm:{
        user:{
          name:''
        },
        room:{
          roomName:''
        }
      },//查看单个座位信息
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.selectRooms();
    // this.selectSeat();
  },
  methods: {
    //根据楼层显示房间
    selectRooms() {
      this.roomDatas = [];
      this.roomForm.roomNo = "";
      const _param = {
        floor: this.roomForm.floor,
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/room/selectRoomList", _params, (data) => {
        if (data.code === 200) {
          this.roomDatas = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //房间信息
    selectRoom() {
      this.roomData = [];
      const _param = {
        floor: this.roomForm.floor,
        roomName: this.roomForm.roomName,
        roomNo:this.roomForm.roomNo,
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/room/selectRoomList", _params, (data) => {
        if (data.code === 200) {
          this.roomData = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    selectSeat() {
      const _param = {
        seatNo: this.seatForm.seatNo,
        status: this.seatForm.status,
        roomNo: this.roomForm.roomNo,
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/seat/selectSeatList", _params, (data) => {
        if (data.code === 200) {
          this.seatData = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    selected(item) {
      if (this.flag) {
        this.flag = false;
        document.getElementById(item.id).src=require("../../../src/assets/seat.png");
        // this.seatSrc = require("../../../src/assets/seat.png");
      } else {
       if(this.userInfo.credit>=this.roomData[0].creditLevel){
          this.flag = true;
       document.getElementById(item.id).src=require("../../../src/assets/isSeat.png");
        this.dialogVisible = true;
        this.reserveForm = item;
       }else{
         this.$message({
            message: '您的信用值未达到要求，不能预约当前座位！',
            showClose: true,
            duration: 1000,
          });
       }
      }
    },
    //查看单个座位信息
    getSeatInfo(item){
      console.log(item)
      this.seatOnForm = JSON.parse(JSON.stringify(item))
      this.dialogSeatVisible = true;
    },
    //预约座位
    reserveSubmit() {
      const _param = {
        seatId: this.reserveForm.id,
        userId: this.userInfo.id,
        reserveStartDate: this.reserveForm.time[0],
        reserveEndDate: this.reserveForm.time[1],
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/reserveRecord/reserveSeat", _params, (data) => {
        if (data.code === 200) {
          this.dialogVisible = false;
          this.$message.success({
            message: '预约成功！',
            showClose: true,
            duration: 1000,
          });
          this.selectSeat()
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
          this.selectSeat()
        }
      });
    },
    //编辑座位
    editSeat(){
      const _param = {
        id: this.seatOnForm.id,
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/seat/updateSeat", _params, (data) => {
        if (data.code === 200) {
          this.dialogVisible = false
          this.selectSeat()
          this.$message.success({
            message: '保存成功！',
            showClose: true,
            duration: 1000,
          });
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //删除座位
    deleteSeat(){
      const _param = {
        id: this.seatOnForm.id,
      };
      const _params = JSON.stringify(_param);
      webservice.HttpPost("/api/seat/deleteSeat", _params, (data) => {
        if (data.code === 200) {
          this.dialogSeatVisible = false
          this.selectSeat()
          this.$message.success({
            message: '删除成功！',
            showClose: true,
            duration: 1000,
          });
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    }
  },
};
</script>

<style>
.seat {
  width: 90%;
  display: flex;
  /* justify-content: space-around; */
  flex-wrap:wrap;
}
.seatItem {
  width: 23px;
}
</style>